<template>
  <div class="box" style="position: relative;">
    <el-switch
      style="display: block"
      v-model="value"
      active-color="#13ce66"
      inactive-color="#13ce66"
      active-text="时间"
      inactive-text="公里标" @change="change">
    </el-switch>
    <!-- <div style="position: absolute; height: 100%; display: flex; justify-content: center; z-index: 1; width: 0;"> -->
      <img style="width: 45px; height: 45px; position: absolute; bottom: 8%; left: 45%;" :src="pointIcon" />
    <!-- </div> -->
    <div class="chart" ref="chartsItem" id="chartsItem" />
  </div>
</template>
<script>
import * as echarts from 'echarts';
import axios from 'axios';
export default {
  props: {
    list: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      datasList: [],
      data1: [],
      data2: [],
      data3: [],
      colors: ['#5470C6', '#EE6666', '#ffff00'],
      currentList: [],
      value: true,
      kilometer: [],
      myChart: null,
      pointIcon: require('@/assets/image/carw.png')
    };
  },
  mounted() {
    var that = this;
    that.$nextTick(() => {
      let arr =  []
      let newarr = []
      Object.keys(that.list).forEach(item => {
        arr.push(this.getTimestamp(item));
      });
      // console.log('that.datasList',that.datasList)
      newarr = arr.sort((a, b) => a - b);
      newarr.forEach(item => {
         that.datasList.push(this.timestampToTime(item)) //时间
         that.currentList.push(this.timestampToTime2(item))
      })
      Object.values(that.list).forEach(item => {
        that.kilometer.push(item.encode22) //公里标
        that.data1.push(item.encode16); //速度
        that.data2.push(item.encode26); //列车管压力
        that.data3.push('120');
      });
      that.xiangdian();
    });
  },
  methods: {
    getTimestamp(val){
      const timestamp = Math.floor(new Date(val).getTime() / 1000);
      return timestamp
    },
    timestampToTime(timestamp) {
      // 时间戳为10位需*1000，时间戳为13位不需乘1000
      var date = new Date(timestamp * 1000);
      var Y = date.getFullYear() + "-";
      var M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var D = (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
      var h = date.getHours() + ":";
      var m = date.getMinutes() + ":";
      var s = date.getSeconds();
      return  h + m + s;
    },
    timestampToTime2(timestamp) {
      // 时间戳为10位需*1000，时间戳为13位不需乘1000
      var date = new Date(timestamp * 1000);
      var Y = date.getFullYear() + "-";
      var M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var D = (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
      var h = date.getHours() + ":";
      var m = date.getMinutes() + ":";
      var s = date.getSeconds();
      return Y + M + D + h + m + s;
    },
    xiangdian() {
      const chartDom = this.$refs.chartsItem;
      this.myChart = echarts.init(chartDom);
      var option = {
        color: this.colors,
        tooltip: {
          trigger: 'none',
          axisPointer: {
            type: 'cross'
          }
        },
        legend: {
          textStyle: {
              color: '#ffffff' // 这里设置图例的字体颜色为红色
          }
        },
        grid: {
          top: 70,
          bottom: 50
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.datasList
        },
        yAxis: [
          {
            name: '管压KPA',
            type: 'value'
          },
          {
            name: '速度km/h',
            nameLocation: 'start',
            alignTicks: true,
            type: 'category',
            inverse: true,
            data: [150, 120, 90, 60, 30, 0]
          }
        ],
        series: [
          {
            name: '速度km/h',
            type: 'line',
            // xAxisIndex: 1,
            smooth: true,
            emphasis: {
              focus: 'series'
            },
            data: this.data1.reverse()
          },
          {
            name: '管压力KPA',
            type: 'line',
            smooth: true,
            emphasis: {
              focus: 'series'
            },
            data: this.data2.reverse()
          },
          {
            name: '限速',
            type: 'line',
            smooth: true,
            emphasis: {
              focus: 'series'
            },
            data: this.data3
          }
        ]
      };
      this.myChart.setOption(option);
      var that = this
      // 监听点击事件
      this.myChart.on('click',function (params) {
        console.log('params',params,params.name,that.datasList[that.datasList.length-1])
          // 检查点击的是否是xAxis的标签
          if (params.name == that.datasList[that.datasList.length-1]) {
              // 获取点击的数据
              var data = params.value;
              var times = that.currentList[that.currentList.length-1]
              console.log('times',times)
              that.$emit('clickIdxChart',times)
          } else {
            that.$emit('clickIdxChartChange',params.name)
          }
      });
    },
    change(e){
      this.value = e
      if(!this.value){
        var option = {
          xAxis: {
            data: this.kilometer
          }
        }
        this.myChart.setOption(option)
      } else {
        var option = {
          xAxis: {
            data: this.datasList
          }
        }
        this.myChart.setOption(option)
      }
    }
  }
};
</script>
<style scoped>
.box {
  height: 100%;
}
.chart {
  height: 100%;
}
/deep/.el-switch{
  padding-right: 20px;
  display: flex!important;
  justify-content: flex-end;
}
</style>


